// 请求数据
$.ajax({
    // 资源的目标地址
    url: "/data/search.json",
    // 声明响应的格式
    contentType: "json",
    // 请求成功后的回调
    success: function (data) {
        console.log(data); // 响应的数据
        // 获取input标签的对象
        let input = $(".web-index-header .header-search-wrapper .text-wrapper .input");
        // 设定一个定时任务来定时的写入 placeholder
        // 参数1 ：处理任务的逻辑
        // 参数2 ：任务每隔多久执行一次
        let len = data.length;
        let count = 0;
        input.attr("placeholder", data[count++ % len])
        setInterval(function () {
            input.attr("placeholder", data[count++ % len])
        }, 2000)
    }
});


// 开启大图片的轮播
layui.use("carousel", function () {
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
        elem: '#carousel-lg',
        width: '100%',//设置容器宽度
        height: '470px',
        arrow: 'always' //始终显示箭头
    });
    carousel.render({
        elem: '#carousel-sm',
        width: '100%',//设置容器宽度
        height: '470px'
        // arrow: 'always' //始终显示箭头
    });
});

// 猜你喜欢的数据处理
// 请求数据
let navs = [];


// 导航栏数据请求
$.ajax({
    url: "/data/navs.json",
    contentType: 'json',
    success: function (data) {
        navs = data.navs;
        // 渲染导航数据
        let navEl = $(".web-index-content .recommend-nav");
        let listEl = $("#recommend-content-list");
        for (let i = 0; i < navs.length; i++) {
            let liHtml = `
            <li class="item-wrapper">
                <a class="item-link" index="${i}" href="">
                    <div class="link-btn">${navs[i].title}</div>
                    <p class="text active">${navs[i].text}</p>
                </a>
            </li>
            `
            navEl.append($(liHtml));
            navEl.find(".link-btn").first().addClass("active");


            let contentHtml = `
            <div class="recommend-content-wrapper item-${navs[i].id}">
                 <div class="recommend-content">
                    
                </div>
            </div>
            `
            listEl.append($(contentHtml));
        }
        // 对选择的标签加active
        navEl.find(".link-btn").first().addClass("active");
        // 对内容区增加 active
        $("#recommend-content-list .recommend-content-wrapper").first().addClass("active");
        // 对所有的导航添加点击事件
        $(".recommend-nav .item-link").on('click', function (event) {
            // 去除默认事件
            event.preventDefault();
            // 删除所有的active
            navEl.find(".link-btn").removeClass("active");
            let target = event.currentTarget;
            $(target).find('.link-btn').addClass("active");

            // 获取被点击对象的 索引
            let index = parseInt($(target).attr("index"));
            listEl.find(".recommend-content-wrapper").removeClass("active");
            $(listEl.find(".recommend-content-wrapper")[index]).addClass("active");

            // 主动请求数据
            let id = navs[index].id;
            let url = navs[index].url;
            // page.current++;
            let page = {
                current: 1,
                size: 10
            }
            if (id === 2) {
                page.current = 2;
            }
            contentViewData(id, url, page)
        });

        // 开始渲染内容区: 初始化
        let page = {
            current: 1,
            size: 10
        }
        contentViewData(1, "/commodity/findByPage", page);
    }
});

// 内容数据处理
function contentViewData(id, url, page) {
    $.ajax({
        url: url,
        method: 'get',
        data: page,
        dataType: 'json',
        success: function (data) {
            let lists = data.rows;
            console.log(lists)
            // 获取lists的父元素
            // 外面这个$是将标签封装成一个 jQuery 对象,后面才可以使用 jQuery 的API
            let contentListHtml = $($(`#recommend-content-list .item-${id} .recommend-content`));
            // 清空前面的数据
            contentListHtml.html("");
            for (let j = 0; j < lists.length; j++) {

                let priceStr = String(lists[j].price);
                let price = parseInt(priceStr);
                let pointer = priceStr.substr(priceStr.indexOf("\\."));
                // 判断是不是自营
                let flag = "self" === lists[j].type;
                let selfClassName = "";
                if (!flag) {
                    selfClassName = "normal";
                }

                let imgSrc = lists[j].commodityPic.imgSrc;
                let item = `
                    <div class="good-wrapper">
                        <a href="/commodity/detail?id=${lists[j].id}" class="link">
                            <div class="good-img">
                                <img src="${imgSrc}"
                                     alt="">
                            </div>
                            <div class="good-title">
                                <p class="title">
                                    <span class="icon ${selfClassName}">自营</span>
                                    ${lists[j].title}
                                </p>
                            </div>
                            <div class="good-price">
                                <span class="icon">￥</span>
                                <span class="price">${price}.</span>
                                <span class="pointer">${pointer}</span>
                            </div>
                        </a>
                    </div>
                `
                contentListHtml.append($(item));
            }
        }
    });
}
